<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE的tab应用</title>
		<script src="../assets/js/vue.js"></script>
	</head>
	<body>
		<style>
			.tab-button {
				padding: 6px 10px;
				border-top-left-radius: 3px;
				border-top-right-radius: 3px;
				border: 1px solid #ccc;
				cursor: pointer;
				background: #f0f0f0;
				margin-bottom: -1px;
				margin-right: -1px;
			}

			.tab-button:hover {
				background: #e0e0e0;
			}

			.tab-button.active {
				background: #e0e0e0;
			}

			.tab {
				border: 1px solid #ccc;
				padding: 10px;
			}
		</style>
		<div id="app">
			<button v-for="tab in tabs" v-bind:key='tab' v-on:click="getCurrTab(tab)">
				{{tab}}
			</button>
			<component v-bind:is="currentTab"></component>
		</div>

		<script>
			new Vue({
				el: "#app",
				data: {
					currentTab: "one",
					tabs: ["one", "two", "thrid"]
				},
				methods:{
					getCurrTab: function (tab) {
						this.currentTab = tab;
					}
				},
				computed:{
					currTab: function () {
						return this.currTab;
					}
				},
				components:{
					one: {
						template:"<div>one</div>"
					},
					two: {
						template:"<div>two</div>"
					},
					thrid: {
						template:"<div>thrid</div>"
					}
				}
			})
		</script>
	</body>
</html>
